 <template>
 <div class="content">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="实验题目" >
            <el-input v-model="form.title"></el-input>
        </el-form-item>
    <el-form-item label="实验目的">
        <el-input v-model="form.purpose"></el-input>
    </el-form-item>
    <el-form-item label="实验内容">
        <el-input v-model="form.content"></el-input>
    </el-form-item>
    <el-form-item label="实验步骤">
            <el-button type="primary" @click="newDetail = true">新增实验步骤</el-button>
            <el-table :data="tableData" style="width: 100%;" stripe>
                <el-table-column type="index" >
                </el-table-column>
                <el-table-column  label="步骤" header-align="center" >
                <template scope="scope">
                    <span>{{ scope.row.step1 }}</span>
                </template>
                </el-table-column> 
                <!--<el-table-column  label="是否上课提交" header-align="center">
                <template scope="scope">
                    <span>{{ scope.row.judge1 }}</span>
                </template>
                </el-table-column> -->
                <el-table-column label="操作"  header-align="center">
                    <template scope="scope">
                        <el-button type="danger" size="small" @click="Delete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
           <el-dialog title="实验步骤" :visible.sync="newDetail">
            <el-form :model="form">
                <el-form-item>
                <el-input v-model="form.step" type="text"  :rows="4" placeholder="请输入内容" >
                </el-input>
                </el-form-item>
                    <!--<el-form-item label="是否上课提交" >
                    <el-select v-model="form.judge2" placeholder="是否上课提交">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                    </el-select>
                    </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="newDetail = false">取 消</el-button>
                <el-button type="primary" @click="Detail">确 定</el-button>
            </div>
            </el-dialog> 
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList">
            <el-button size="small" type="primary">上传附件</el-button>
        </el-upload>
    </el-form-item>
    <el-form-item label="截止时间">
        <el-col :span="11">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.endDate" style="width: 100%;"></el-date-picker>
        </el-col>
    </el-form-item>
    <el-form-item label="备注">
        <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submit">立即创建</el-button>
        <el-button @click="back" type="danger">取消</el-button>
    </el-form-item>
    </el-form>


 </div>

</template> 
<script>

import axios from 'axios'

  export default {
      data() {
      return {
        tableData:[],
        stepData:[],
        form: {
            title:'',
            purpose:'',
            content:'',
            step:'',
            // judge2: '',
            endDate:'',
            desc:'',
            accessory:''
        },



        newDetail: false,

       fileList: [{name: '', url: ''}]

    }
},
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        

        back() {

            this.$confirm('是否取消?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                });
                this.$router.go(-1);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        //删除步骤
        Delete(index,row){
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    message: '删除成功',
                    type: 'success',
                });
                this.tableData.splice(index,1);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已删除'
                });
            });
        },
        //新增步骤
        Detail() {
            this.tableData.push({
                "step1": this.form.step
                // judge1: this.form.judge2,
            });
            console.log(this.tableData)
            this.newDetail = false;
            this.form.step="";
            // this.form.judge2="";
        },
        //提交数据
        submit(){
            for (var data of this.tableData){
                var data1=data.step1
                this.stepData.push(data1)
                
            }
            console.log(this.stepData)
            var course = this.$route.query.course;
            var params = new URLSearchParams();
            params.append('title',this.form.title);
            params.append('purpose',this.form.purpose);
            params.append('content',this.form.content);
            params.append('endDate',this.form.endDate);
            params.append('class',this.$store.state.user.course[course][0]);
            params.append('step',this.stepData);
            params.append('accessory',this.form.accessory);
            params.append('remark',this.form.desc);
            var _this = this
            axios.post('/experiment/create',params).then(function(res){
                if(res.data.msg=="实验已存在"){
                    alert("实验已存在")
                }else{
                     _this.$router.push({path:'/teacher'})
                }
            })

        }


    },

  }
</script>

<style>
 .content{
    margin: 0 auto;

     -webkit-box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
     box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
     width:1200px;
  }
  .content form{
      padding-top: 20px;
      padding-right: 50px;
      padding-left: 40px;
      padding-bottom: 20px;
  }
  .content button{
      margin-top: 20px;
      margin-bottom: 20px;
  }
</style>